<template>
	<view v-if="load">
		<uni-head title="确认投保信息"></uni-head>
		<view class="form-body">
			<view class="form-title">
				<view class="form-title-line"></view>
				<view class="form-title-txt">方案选择</view>
			</view>
			<view class="form-title" v-if="info.level">
				<view class="form-label confirm-label">方案等级</view>
				<view class="form-content confirm-orange">{{info.level}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">保障方案</view>
				<view class="form-content confirm-orange">{{info.fanan_memo}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">生效日期</view>
				<view class="form-content">{{info.start_time}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">失效日期</view>
				<view class="form-content">{{info.end_time}}</view>
			</view>
			<view class="form-title">
				<view class="form-title-line"></view>
				<view class="form-title-txt">营业执照</view>
			</view>
			<view class="form-title">
				<view class="form-content">
					<image @tap="viewImage(info.insure.license)" :src="info.insure.license" mode="aspectFill"
						class="confirm-yyzz"></image>
				</view>
			</view>
			<view class="form-title">
				<view class="form-title-line"></view>
				<view class="form-title-txt">投保企业</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">企业名称</view>
				<view class="form-content">{{info.insure.name}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">统一信用编码</view>
				<view class="form-content">{{info.insure.client}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">经办人</view>
				<view class="form-content">{{info.insure.contact}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">经办人手机号</view>
				<view class="form-content">{{info.insure.contact_mobile}}</view>
			</view>
			<!-- <view class="form-title" >
				<view class="form-label confirm-label">所在地区</view>
				<view class="form-content" >{{info.insure.province}}{{info.insure.city}}{{info.insure.area}}</view>
			</view> -->
			<view class="form-title">
				<view class="form-label confirm-label">详细地址</view>
				<view class="form-content">{{info.insure.address}}</view>
			</view>

			<view v-if="info.open_arr.length > 0">
				<view class="form-title">
					<view class="form-title-line"></view>
					<view class="form-title-txt">其他共同被保企业</view>
				</view>
				<view v-for="(item,key) in info.open_arr" :key="'open'+key" class="bb-card">
					<!-- <view class="form-title" >
						<view class="form-content" >
							<image @tap="viewImage(item.license)" :src="item.license" mode="aspectFill" class="confirm-yyzz" ></image>
						</view>
					</view> -->
					<view class="form-title">
						<view class="form-label confirm-label">企业名称</view>
						<view class="form-content">{{item.name}}</view>
					</view>
					<view class="form-title">
						<view class="form-label confirm-label">统一信用编码</view>
						<view class="form-content">{{item.client}}</view>
					</view>
					<!-- <view class="form-title" >
						<view class="form-label confirm-label">联系人</view>
						<view class="form-content" >{{item.contact}}</view>
					</view>
					<view class="form-title" >
						<view class="form-label confirm-label">联系人手机号</view>
						<view class="form-content" >{{item.contact_mobile}}</view>
					</view>
					<view class="form-title" >
						<view class="form-label confirm-label">办公地址</view>
						<view class="form-content" >{{item.address}}</view>
					</view> -->
				</view>
			</view>
			<view class="form-title" v-if="info.bx_id != 9">
				<view class="form-title-line"></view>
				<view class="form-title-txt">投保人员</view>
			</view>
			<view>
				<view v-for="(item,index) in info.user" :key="'pe'+index" class="form-persons">
					<view>{{item.name}}</view>
					<view class="form-persons-idcard">{{item.id_card}}</view>
				</view>
			</view>
			<view class="" v-if="info.bx_id == 9">
				<view class="form-title">
					<view class="form-title-line"></view>
					<view class="form-title-txt">充电桩信息</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">地址</view>
					<view class="form-content">
						{{info.charge_info.province}}-{{info.charge_info.city}}-{{info.charge_info.area}}
					</view>
				</view>

				<view class="form-title">
					<view class="form-label confirm-label">详细地址</view>
					<view class="form-content">{{info.charge_info.address}}</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">充电桩数量</view>
					<view class="form-content">{{info.charge_info.num}}</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">充电桩面积</view>
					<view class="form-content">{{info.charge_info.area_num}}</view>
				</view>
			</view>
			<view class="" v-if="info.bx_id == 9">
				<view class="form-title">
					<view class="form-title-line"></view>
					<view class="form-title-txt">投保充电桩清单</view>
				</view>
				<view>
					<view v-for="(item,index) in info.stake" :key="'pe'+index" class="form-persons">
						<view>{{item.no}}</view>
						<view class="form-persons-idcard">{{item.price}}</view>
					</view>
				</view>
			</view>
			<view class="form-title">
				<view class="form-title-line"></view>
				<view class="form-title-txt">发票信息</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">发票类型</view>
				<view class="form-content">{{info.invoice.invoice_type == 1 ? '增值税专票' : '增值税普票'}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">发票抬头</view>
				<view class="form-content">{{info.invoice.invoice_name}}</view>
			</view>
			<view class="form-title">
				<view class="form-label confirm-label">纳税人识别号</view>
				<view class="form-content">{{info.invoice.invoice_no}}</view>
			</view>
			<view v-if="info.invoice.invoice_type == 1">
				<view class="form-title">
					<view class="form-label confirm-label">注册地址</view>
					<view class="form-content">{{info.invoice.invoice_address}}</view>
					<!-- <view class="form-content" >{{info.invoice.invoice_province}}{{info.invoice.invoice_city}}{{info.invoice.invoice_area}}</view> -->
				</view>
				<!-- <view class="form-title" >
					<view class="form-label confirm-label"></view>
					<view class="form-content" >{{info.invoice.invoice_address}}</view>
				</view> -->
				<view class="form-title">
					<view class="form-label confirm-label">注册电话</view>
					<view class="form-content">{{info.invoice.invoice_mobile}}</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">开户银行</view>
					<view class="form-content">{{info.invoice.invoice_bank}}</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">开户账号</view>
					<view class="form-content">{{info.invoice.invoice_bank_no}}</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">收件人</view>
					<view class="form-content">{{info.invoice.name}}</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">收件人手机号</view>
					<view class="form-content">{{info.invoice.mobile}}</view>
				</view>
				<view class="form-title">
					<view class="form-label confirm-label">收件地址</view>
					<view class="form-content">{{info.invoice.address}}</view>
					<!-- <view class="form-content" >{{info.invoice.province}}{{info.invoice.city}}{{info.invoice.area}}</view> -->
				</view>
				<!-- <view class="form-title" >
					<view class="form-label confirm-label"></view>
					<view class="form-content" >{{info.invoice.address}}</view>
				</view> -->
			</view>
		</view>
		<view class="" style="padding: 20rpx 30rpx;"  v-if="info.type == 2">
			请下载投保单，详细阅读，并打印前5页，在第3页投保人处盖章，同时加盖骑缝章。提交后，生成付款链接，如需公对公支付，请在<text style="color: red;font-weight: 600;">用途栏备注通知单号后六位</text>！
		</view>
		<view class="" style="color: red;padding: 20rpx 30rpx;" v-if="info.type == 2">
			<view class=""  @click="shili(0)">
				盖章实例
			</view>
			<view class="" style="margin-top: 20rpx;"  @click="shili(1)">
				盖骑缝章示例
			</view>
		</view>
		<view class="confirm-price">
			<view>合计保费：</view>
			<view class="confirm-price-unit">￥</view>
			<view class="confirm-price-num">{{info.total_price}}</view>
			<view class="confirm-price-memo">（包含主险{{info.price元}}</view>
			<view class="confirm-price-memo">
				<text v-if="info.third_price > 0">+三者{{info.third_price}}元</text>
				<text v-if="info.finished_price > 0">+完工责任{{info.finished_price}}元</text>
				<text>）</text>
			</view>
		</view>
		<view class="bx-lines"></view>

		<view class="bx-footer">
			<view class="" style="display: flex;justify-content: space-between;padding-bottom: 10rpx;background-color: white;">
				<view class="" v-if="info.apply_url" >
					<a :href="info.apply_url" style="text-decoration: none;color: blue;">下载投保单</a>
				</view>
				<view class="" v-if="info.apply_url" @tap="uploadFile()" style="color: blue;">
				上传投保单
				</view>
			</view>
			<view class="" style="display: flex;">
				<view class="bx-footer-left confirm-footer-left" @tap="toBack()">
					<view>修改</view>
				</view>
				<view class="bx-footer-right" v-if="info.type == 1" @tap="submit()">确认支付</view>
				<view class="" v-if="info.type == 2" class="bx-footer-right">
					<view @tap="paPay()" v-if="!info.apply_no">提交到保司</view>
					<view @tap="getApply()" v-if="info.apply_no && !info.apply_url">获取投保单号</view>
					<view @tap="toPay()" v-if="info.apply_url && info.pay_url" :style="info.up_apply_url ? '':'background:#DDDDDD'">去支付</view>
				</view>
			</view>

		</view>
		 
	</view>
</template>

<script>
	import uniHead from '@/components/uni-dead/head.vue';

	export default {
		components: {
			uniHead
		},
		data() {
			return {
				id: 0,
				load: false,
				info: {},
				fileList:[],//上传投保单
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getData();
		},
		methods: {
			shili(v){
				//0是盖章实例 1是盖骑缝章实例
				// this.$refs.popup.open()
				uni.previewImage({
					urls:['../../static/img/shili1.jpg','../../static/img/shili2.jpg'],
					current:v
				})
			},
			submit() {
				uni.showLoading({
					title: '支付拉起中'
				})
				let url = ""
				if (this.info.type == 2) {
					url = 'paorder/orderPay'
				} else {
					url = 'home/orderPay'
				}
				this.ajax(url, {
					data: {
						id: this.id,
					},
					success: (res) => {
						uni.hideLoading();
						if (res.code) {
							/* uni.switchTab({
								url:'/pages/index/user'
							}) */
							location.href = res.msg;
							uni.showModal({
								title: '温馨提示',
								content: '是否已支付？',
								confirmText: '支付成功',
								cancelText: '未支付',
								success: (res) => {

									if (res.confirm) {
										this.ajax('home/truePay', {
											data: {
												id: this.id,
											},
											success: (res) => {

												if (res.code) {
													uni.navigateTo({
														url: '/pages/order/order'
													})
												} else {
													this.toast(res.msg);
												}
											}
										})
									} else if (res.cancel) {}
								}
							});
						} else {
							this.toast(res.msg);
						}
					}
				})
			},
			//提交到保司
			paPay() {
				uni.showLoading({
					title: '提交中'
				})
				let url = ""
				if (this.info.type == 2) {
					url = 'paorder/orderPay'
				} else {
					url = 'home/orderPay'
				}
				this.ajax(url, {
					data: {
						id: this.id,
					},
					success: (res) => {
						uni.hideLoading();
						if (res.code) {
							/* uni.switchTab({
								url:'/pages/index/user'
							}) */
							this.getData();
							//location.href = res.msg;
							// uni.showModal({
							// 	title: '温馨提示',
							// 	content: '是否已支付？',
							// 	confirmText:'支付成功',
							// 	cancelText:'未支付',
							// 	success:  (res)=> {

							// 		if (res.confirm) {
							// 			this.ajax('home/truePay',{
							// 				data:{
							// 				  id : this.id,
							// 				},
							// 				success:(res) => {

							// 				  if(res.code ) {
							// 					  uni.navigateTo({
							// 					  	url:'/pages/order/order'
							// 					  })
							// 				  } else {
							// 					this.toast(res.msg);
							// 				  }
							// 				}
							// 			  })
							// 		} else if (res.cancel) {
							// 		}
							// 	}
							// });
						} else {
							this.toast(res.msg);
						}
					}
				})
			},
			//获取投保单号
			getApply() {
				console.log(this.info);
				uni.showLoading({
					title:'获取中'
				})
				this.ajax('paorder/getApplyBd', {
					data: {
						id: this.id
					},
					success: (res) => {
						uni.hideLoading();
						this.getData();
					}
				})
			},
			//上传投保单
			uploadFile(){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: '/phone' + '/paorder/uploadApply', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'id': this.id,
								'file':tempFilePaths[0],
								'apply_no':this.info.apply_no
								
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								this.getData()
							}
						});
					}
				});

			},
			 //去支付
			 toPay(){
				 
				location.href = this.info.pay_url; 
			 },
			toBack() {
				if (this.info.type == 2) {
					uni.navigateTo({
						url: '/pages/bx/formgfu?id=' + this.info.bx_id + '&order_id=' + this.info.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/bx/form?id=' + this.info.bx_id + '&order_id=' + this.info.id
					})
				}

			},
			//查看大图
			viewImage(src) {
				uni.previewImage({
					urls: [src],
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				this.ajax('user/orderInfo', {
					data: {
						id: this.id,
					},
					success: (res) => {
						uni.hideLoading();
						this.info = res.msg;
						this.load = true;
					}
				});
			}
		}
	}
</script>

<style>
	@import url("@/static/css/box/index.css");
	@import url("@/static/css/box/form.css");
	@import url("@/static/css/box/confirm.css");
</style>